<html>
<head>
    <title>layout example</title>
    <link rel="stylesheet" href="${ctxPath}/static/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctxPath}/static/css/public.css" media="all">
    <link rel="stylesheet" href="${ctxPath}/static/layout/jquery.layout-latest.css" media="all"/>

    <script src="${ctxPath}/static/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script src="${ctxPath}/static/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script type="text/javascript" src="${ctxPath}/static/layout/jquery.js"></script>
    <script type="text/javascript" src="${ctxPath}/static/layout/jquery.layout.js"></script>

    <script type="text/javascript">
        $(function() {
            var panehHidden = false;
            if ($(this).width() < 769) {
                panehHidden = true;
            }
            $('#continer').layout({ applydefaultstyles: panehHidden, west__size: 185  });
        });
    </script>
</head>
<body style=" color:#595959;
    background-color:#f5f7f9">
<div class="layuimini-container">
    <div class="layuimini-main">
        <div id="continer" style="height: 100%">
            <div class="ui-layout-west">
                <div class="ui-layout-west">
                    <div class="layui-card-body">
                        <ul id="treeElem" class="ztree"></ul>
                    </div>
                </div>
            </div>

            <div class="ui-layout-center">
                <fieldset class="table-search-fieldset">
                    <legend>搜索信息</legend>
                    <div style="margin: 10px 10px 10px 10px">
                        <form class="layui-form layui-form-pane" action="">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">用户姓名</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="name" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">用户类型</label>
                                    <div class="layui-input-inline">
                                        <#select path="userType" items="${fnc.getDictList('sys_user_type')}" placeholder="请选择" />
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button class="layui-btn layui-btn-primary" lay-submit lay-filter="search">
                                        <i class="layui-icon"></i> 搜 索
                                    </button>

                                    <button type="button" class="layui-btn icon-btn" data-type="add">
                                        <i class="layui-icon">&#xe654;</i>添加
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </fieldset>

                <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="table-toolbar">
    <a class="layui-btn layui-btn-normal layui-btn-xs layui-btn-radius" lay-event="view"><i
            class="layui-icon layui-icon-list"></i>查看</a>
    @if(shiro.hasPermission('user:edit')){
    <a class="layui-btn layui-btn-primary layui-btn-xs layui-btn-radius" lay-event="edit"><i
            class="layui-icon layui-icon-edit"></i>编辑</a>
    @}
    @if(shiro.hasPermission('user:delete')){
    <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-radius" lay-event="del"><i
            class="layui-icon layui-icon-delete"></i>删除</a>
    @}
</script>
<script>
    layui.use([ 'table', 'form', 'laydate', 'openLayer', 'utils','feng', "layoutTree",], function () {
        var  $ = layui.$,
            table = layui.table,
            form = layui.form,
            openLayer = layui.openLayer,
            utils = layui.utils,
            feng=layui.feng,
            layoutTree= layui.layoutTree;


        // 渲染表格
        var tableData=table.render({
            elem: "#tableId",
            url: "/sys/user/dataList",
            limit: 10,
            page: true,
            /* toolbar: "#toolbarTpl",*/
            height: 'full-220',
            cols: [[
                {type: "numbers", fixed: "left"},
                {field: "name", title: "用户姓名"},
                {field: "loginName", title: "登录名"},
                {field: "email", title: "邮箱"},
                {field: "user", title: "归属部门", templet: function (obj) {
                        return obj.office.name;
                    }},
                {field: "userType", title: "用户类型", templet: function (d) {
                        return feng.getDictLabel('${fnc.getDictListJson("sys_user_type")}', d.userType)
                    }},
                {field: "loginFlag", title: "是否允许登陆", templet: function (d) {
                        return feng.getDictLabel('${fnc.getDictListJson("yes_no")}', d.loginFlag)
                    }},
                {title: '操作', toolbar: '#table-toolbar', align: "center"}
            ]],
            done: function (res, curr, count) {
            }
        });

        layoutTree.render({
            treeelem:'#treeElem',//zTree显示div的id
            elem : 'tableId',//table的id
            url : '/sys/office/treeData',//zTree类型数据获取的URL
            search:'office'//需要查询的值
        });




        form.on("submit(search)", function (data) {
            //执行重载
            table.reload('tableId', {
                where: data.field,
                page: {curr: 1}
            });
            return false;
        });


        table.on("tool(tableFilter)", function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case "view":
                    view(data.id);
                    break;
                case "edit":
                    edit(data.id);
                    break;
                case "del":
                    del(data.id);
                    break;
            }
        });

        function view(id) {
            openLayer.opneView({
                url:"/sys/user/form",
                value:id
            })
        }

        function edit(id) {
            openLayer.opneEdit({
                url:"/sys/user/form",
                value:id
            })
        }

        function del(id) {

            openLayer.confirm("确定要删除吗？", function () {
                utils.ajax("/sys/user/delete?id="+ id, "post").done(function (result) {
                    if(result.code=="0"){
                        utils.tableSuccessMsg(result.msg);
                    }else {
                        utils.tableSuccessMsg("删除失败");
                    }
                    tableData.reload();
                }).fail(function (error) {
                });
            })
        }
        //事件
        var active = {
            add: function () {
                openLayer.opneAdd({
                    url:"/sys/user/form"
                })
            },
        };
        $('[data-type]').click(function(){
            var type = $(this).data('type');
            active[type].call(this);
        });

    });
</script>

</body>
</html>